/* eslint-disable react/display-name */
import IconFont from "@/components/IconFont";
import { PageContainer, ProCard, StatisticCard } from "@ant-design/pro-components";
import { Button, Col, Flex, Row, Space, Typography } from "antd";
import RcResizeObserver from "rc-resize-observer";
import { useEffect, useRef, useState } from "react";
import { Area, Bar, Line, Pie, Radar } from "@ant-design/plots";
import { title } from "../meta/dict/components/constants";
import * as G2Plot from "@antv/g2plot";
const { Statistic } = StatisticCard;
const data = [
	{ item: "Design", type: "a", score: 70 },
	{ item: "Design", type: "b", score: 30 },
	{ item: "Development", type: "a", score: 60 },
	{ item: "Development", type: "b", score: 70 },
	{ item: "Marketing", type: "a", score: 50 },
	{ item: "Marketing", type: "b", score: 60 },
	{ item: "Users", type: "a", score: 40 },
	{ item: "Users", type: "b", score: 50 },
	{ item: "Test", type: "a", score: 60 },
	{ item: "Test", type: "b", score: 70 },
	{ item: "Language", type: "a", score: 70 },
	{ item: "Language", type: "b", score: 50 },
	{ item: "Technology", type: "a", score: 50 },
	{ item: "Technology", type: "b", score: 40 },
	{ item: "Support", type: "a", score: 30 },
	{ item: "Support", type: "b", score: 40 },
	{ item: "Sales", type: "a", score: 60 },
	{ item: "Sales", type: "b", score: 40 },
	{ item: "UX", type: "a", score: 50 },
	{ item: "UX", type: "b", score: 60 }
];
export default () => {
	const [responsive, setResponsive] = useState(false);
	const config = {
		data,
		xField: "item",
		yField: "score",
		colorField: "type",
		shapeField: "smooth",
		area: {
			style: {
				fillOpacity: 0.5
			}
		},
		scale: { x: { padding: 0.5, align: 0 }, y: { tickCount: 5, domainMax: 80 } },
		axis: { x: { grid: true }, y: { zIndex: 1, title: false } }
		// style: {
		// 	lineWidth: 2
		// }
	};
	const areaConfig = {
		data: [
			{
				x: "2019-01",
				y: 174
			},
			{
				x: "2019-02",
				y: 460
			},
			{
				x: "2019-03",
				y: 373
			},
			{
				x: "2019-04",
				y: 539
			},
			{
				x: "Column1",
				y: 520
			},
			{
				x: "Column2",
				y: 60
			},
			{
				x: "Column3",
				y: 326
			},
			{
				x: "Column4",
				y: 509
			},
			{
				x: "Column5",
				y: 907
			},
			{
				x: "Column6",
				y: 16
			},
			{
				x: "Column7",
				y: 932
			},
			{
				x: "Column8",
				y: 585
			},
			{
				x: "Column9",
				y: 535
			},
			{
				x: "Column10",
				y: 88
			}
		],
		legend: {
			position: "right-top",
			flipPage: false
		},
		xAxis: {
			tickLine: {
				visible: false
			}
		},
		yAxis: {
			boundaryGap: false,

			line: {
				visible: true
			}
		},
		smooth: true,
		line: {
			size: 1
		},
		forceFit: false,
		width: 1090,
		height: 230,
		xField: "x",
		yField: "y",
		color: ["#2f54eb"]
	};
	return (
		<PageContainer
			header={{ title: "数据概览", extra: [<Button key="export">导出</Button>] }}
			token={{
				paddingInlinePageContainerContent: 0,
				paddingBlockPageContainerContent: 0
			}}
		>
			<RcResizeObserver
				key="resize-observer"
				onResize={offset => {
					setResponsive(offset.width < 596);
				}}
			>
				<Row gutter={[10, 10]}>
					<Col xl={18} md={24} xs={24} lg={18}>
						<Row gutter={[10, 10]}>
							<Col xl={24} md={24} xs={24} lg={24}>
								<ProCard gutter={[10, 10]} wrap>
									<ProCard
										colSpan={{
											xs: 24,
											sm: 12,
											md: 12,
											lg: 12,
											xl: 6,
											xxl: 6
										}}
										bodyStyle={{
											background: "#f5faff"
										}}
									>
										<Space align="center">
											<IconFont type="icon-huiyuanxiaoshoufenxi" style={{ fontSize: 40 }} />
											<Typography style={{ marginBottom: 0, fontSize: 24 }}>1231</Typography>
										</Space>
										<Statistic style={{ marginTop: 20 }} value="88.98%" title="销售分析" trend="down" layout="horizontal" />
									</ProCard>

									<ProCard
										colSpan={{
											xs: 24,
											sm: 12,
											md: 12,
											lg: 12,
											xl: 6,
											xxl: 6
										}}
										bodyStyle={{
											background: "#fffafa"
										}}
									>
										<Space align="center">
											<IconFont type="icon-shujutongji" style={{ fontSize: 38 }} />
											<Typography style={{ marginBottom: 0, fontSize: 24 }}>1231</Typography>
										</Space>
										<Statistic style={{ marginTop: 20 }} value="28.98%" title="数据统计" trend="down" layout="horizontal" />
									</ProCard>
									<ProCard
										colSpan={{
											xs: 24,
											sm: 12,
											md: 12,
											lg: 12,
											xl: 6,
											xxl: 6
										}}
										bodyStyle={{
											background: "#f0f9f1"
										}}
									>
										<Space align="center">
											<IconFont type="icon-hangweifenxi" style={{ fontSize: 38 }} />
											<Typography style={{ marginBottom: 0, fontSize: 24 }}>1231</Typography>
										</Space>
										<Statistic style={{ marginTop: 20 }} value="88.98%" title="行为分析" trend="down" layout="horizontal" />
									</ProCard>
									<ProCard
										colSpan={{
											xs: 24,
											sm: 12,
											md: 12,
											lg: 12,
											xl: 6,
											xxl: 6
										}}
										bodyStyle={{
											background: "#faf5ee"
										}}
									>
										<Space align="center">
											<IconFont type="icon-huiyuanshuju" style={{ fontSize: 38 }} />
											<Typography style={{ marginBottom: 0, fontSize: 24 }}>1231</Typography>
										</Space>
										<Statistic style={{ marginTop: 20 }} value="88.98%" title={"门店转化率"} trend="up" layout="horizontal" />
									</ProCard>
								</ProCard>
							</Col>
							<Col xl={24} md={24} xs={24} lg={24}>
								<StatisticCard title="xxx" chart={<Area {...areaConfig} />} />
							</Col>
							<Col xl={24} md={24} xs={24} lg={24}>
								<Row gutter={10}>
									<Col xl={12} md={24} xs={24} lg={12}>
										<StatisticCard title="xxx" chart={<DemoPie />} />
									</Col>
									<Col xl={12} md={24} xs={24} lg={12}>
										<StatisticCard title="xxx" chart={<DemoLine />} />
									</Col>
								</Row>
							</Col>
						</Row>
					</Col>
					<Col xl={6} md={24} xs={24} lg={6}>
						<Row gutter={[10, 10]}>
							<Col span={24}>
								<StatisticCard colSpan={24} title="大盘趋势" chart={<Radar {...config} />} />
							</Col>
							<Col span={24}>
								<StatisticCard colSpan={24} title="大盘趋势" chart={<DemoBar />} />
							</Col>
						</Row>
					</Col>
				</Row>
				{/* <ProCard
					title="数据概览"
					extra="2019年9月28日 星期五"
					split={responsive ? "horizontal" : "vertical"}
					headerBordered
					bordered
				>
					<ProCard split="horizontal">
						<ProCard split="horizontal">
							<ProCard split="vertical">
								<StatisticCard
									statistic={{
										title: "昨日全部流量",
										value: 234,
										description: <Statistic title="较本月平均流量" value="8.04%" trend="down" />
									}}
								/>
								<StatisticCard
									statistic={{
										title: "本月累计流量",
										value: 234,
										description: <Statistic title="月同比" value="8.04%" trend="up" />
									}}
								/>
							</ProCard>
							<ProCard split="vertical">
								<StatisticCard
									statistic={{
										title: "运行中实验",
										value: "12/56",
										suffix: "个"
									}}
								/>
								<StatisticCard
									statistic={{
										title: "历史实验总数",
										value: "134",
										suffix: "个"
									}}
								/>
							</ProCard>
						</ProCard>
						<StatisticCard
							title="流量走势"
							chart={<img src="https://gw.alipayobjects.com/zos/alicdn/_dZIob2NB/zhuzhuangtu.svg" width="100%" />}
						/>
					</ProCard>
					<StatisticCard
						title="流量占用情况"
						chart={
							<img
								src="https://gw.alipayobjects.com/zos/alicdn/qoYmFMxWY/jieping2021-03-29%252520xiawu4.32.34.png"
								alt="大盘"
								width="100%"
							/>
						}
					/>
				</ProCard> */}
			</RcResizeObserver>
		</PageContainer>
	);
};
const DemoBar = () => {
	const config = {
		data: [
			{ type: "分类一", value: 27 },
			{ type: "分类二", value: 25 },
			{ type: "分类三", value: 18 },
			{ type: "分类四", value: 15 },
			{ type: "分类五", value: 10 },
			{ type: "其他", value: 5 }
		],
		angleField: "value",
		colorField: "type",
		paddingRight: 80,
		label: {
			text: "value",
			position: "outside"
		},
		height: 340,
		legend: {
			position: "bottom"
		},
		color: ["#722ed1", "#fa541c", "#1890ff", "#73d13d", "#2f54eb"]
	};
	return <Pie {...config} />;
};
const DemoPie = () => {
	const config = {
		data: [
			{ type: "分类一", value: 27 },
			{ type: "分类二", value: 25 },
			{ type: "分类三", value: 18 },
			{ type: "分类四", value: 15 },
			{ type: "分类五", value: 10 },
			{ type: "其他", value: 5 }
		],
		legend: {
			flipPage: false
		},
		angleField: "value",
		colorField: "type",
		innerRadius: 0.77,
		radius: 1,
		statistic: {
			visible: false
		},
		label: {
			type: "outer"
		},
		forceFit: false,
		color: ["#2f54eb", "#9254de", "#73d13d", "#F6BD16", "#E8684A", "#40a9ff", "#9270CA"],
		// label: {
		// 	text: "value",
		// 	style: {
		// 		fontWeight: "bold"
		// 	}
		// },
		style: {
			height: 348
		},
		// legend: {
		// 	color: {
		// 		title: false,
		// 		position: "right",
		// 		rowPadding: 5
		// 	}
		// },
		annotations: [
			{
				type: "text",
				style: {
					text: "总收入金额",
					x: "50%",
					y: "50%",
					textAlign: "center",
					fontSize: 40,
					fontStyle: "bold"
				}
			}
		]
	};
	// @ts-ignore
	return <Pie {...config} />;
};
const DemoLine = () => {
	const data = [
		{ year: "1991", value: 3 },
		{ year: "1992", value: 4 },
		{ year: "1993", value: 3.5 },
		{ year: "1994", value: 5 },
		{ year: "1995", value: 4.9 },
		{ year: "1996", value: 6 },
		{ year: "1997", value: 7 },
		{ year: "1998", value: 9 },
		{ year: "1999", value: 13 }
	];
	const config = {
		data,
		xField: "year",
		yField: "value",
		point: {
			shapeField: "square",
			sizeField: 4
		},
		interaction: {
			tooltip: {
				marker: false
			}
		},
		style: {
			lineWidth: 2,
			height: 348
		}
	};
	return <Line {...config} />;
};
